<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #box{
            height: 100%;
        }
        #bottom{
            height: 50px;
            width: 100%;
            border: 1px solid #333333;
            position: fixed;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0,0,0,.5);
            color: white;
        }
        #text{
            width: 300px;
            height: 30px;
            margin: 0 10px;
            outline: none;
            border: 1px solid #2299dd;
        }
        #btn{
            width: 50px;
            height: 30px;
            outline: none;
            border: 1px solid #2299dd;
            cursor: pointer;
        }
        #btn:hover{
            background-color: #333333;
            color: white;
        }
        p{
            position: absolute;
            right: 0;
            top: 0;
            font-size: 24px;
            white-space:nowrap;
        }
    </style>
</head>
<body>
<div id="box"></div>
<div id="bottom">
    <span>内容:</span>
    <input type="text" id="text" autofocus placeholder="发条弹幕吧">
    <button type="button" id="btn">发送</button>
</div>

<script src="jquery-3.4.1.min.js"></script>
<script>
    $(function ($) {
        $("#btn").click(function () {
            danMu();
        });

        $("#text").keyup(function (e) {
            if(e.keyCode!==13){
               return
            }
            danMu();

        });

        function danMu() {
            let target=$(window).width()+100;
            if(!$("#text").val()){
                return;
            }
            let p=$("<p>"+$("#text").val()+"</p>");
            $("#text").val("");
            let bgc='#'+Math.floor(Math.random()*0xffffff).toString(16);
            let top=Math.floor(Math.random()*($("#box").height()-$("#bottom").height()-100));
            p.css("color",bgc).css("top",top).appendTo($("#box"));
            p.animate({"right":target},3000,function() {
                $(this).parent().remove($(this));
            });
        }
    });



</script>
</body>
</html>